$ ->

    $("body")

    .on("click", "*[data-direct]", (e)->
            window.location.href = $(e.target).data("direct")
        )

    .on("click", ".book-item i.show-page", (e)->

            $item = $(e.target).closest(".book-item")
            id = $item.data("id")

            # item
            $("#book_box .book-item").removeClass("hidden")
            if(window.innerWidth <= 767)
                $('html, body').animate({ scrollTop: $item.offset().top - 48}, 0).css("overflow": "auto")
            else
                $('html, body').animate({ scrollTop: $item.offset().top - 48}, 500).css("overflow": "auto")



            #page
            $("#book_preview .book-preview-page").addClass("hidden")

            $(".book-item i.show-page").removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-right")
            if ($item.hasClass("active"))
                $item.removeClass("active")
                $("#book_preview .book-preview-page:not([id])").removeClass("hidden")

                return
            $(e.target).removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left")

            showPreview = ->

                #item
                $(".book-item.active").removeClass("active")
                $item.addClass("active").removeClass("hidden")

                $("#book_preview .book-preview-page").addClass("hidden");
                if($("#book_preview_page_#{id}").length == 0)
                    $.get("/book/preview/#{id}").done((response)-> $("#book_preview").append($(response)))

                $("#book_preview_page_#{id}").removeClass("hidden");

                if(window.innerWidth <= 767 && $("#book_box .book-item.active").length > 0)
                    $("#book_box .book-item:not(.active)").addClass("hidden")
                    $('html, body').animate({ scrollTop: 52 }, 0).css("overflow": "hidden")
            showPreview()
        )

    .on("mouseenter", "*[data-type='username']", (e)->
            showDetail = ->
                new Pinion.Tooltip({
                    $el: $(e.target)
                    content: $("<h5>#{$(e.target).html()}</h5>")
                    moveH: (-100 + $(e.target).width())/2
                    moveV: -105
                    className: ""
                }).show()

            setTimeout((->showDetail()), 800)
            $(e.target).one("mouseleave", -> showDetail = ->)
        )

    .on("click", "span[data-role='tag'][data-name]", (e)->
            window.location.href = "/book/explorer/?tag=#{$(e.currentTarget).data("name")}"
        )

    .on("mouseenter", "span[data-role='tag'][data-id]", (e)->

            showDetail = ->
                new Pinion.Tooltip({
                    $el: $(e.target)
                    content: $("<span class='btn' onclick='Pinion.subscribe(#{$(e.target).data("id")})'>订阅</span>")
                    moveV: -29
                    width: 68
                    height: 26
                    className: "tooltip-subscribe"
                }).show({})

            setTimeout((->showDetail()), 800)
            $(e.target).one("mouseleave", -> showDetail = ->)
        )
